<div class="user-card">
	<a title="<c:out value="${profileOwnerBo.username}"></c:out>" href="${ctx}/profile?id=${profileOwnerBo.userId}"><img src="${ctx}/res/images/avatar.png" class="thumb"></a>
	<h3><a href="${ctx}/profile?id=${profileOwnerBo.userId}" title="<c:out value="${profileOwnerBo.username}"></c:out>"><c:out value="${profileOwnerBo.username}"></c:out></a></h3>
	<ul class="meta-index vertical">
     	<li><c:if test="${profileOwnerBo.userId == currentUser.userId}"><a href="${ctx}/profile_edit">Edit my profile</a></c:if></li>
     	<li>Joined <span><c:out value="${profileOwnerBo.joinedDateDiff}"></c:out></span></li>
  	</ul>
</div>
<div class="pane">
	<ul class="follow-index vertical">
		<li><span style="padding: 0 8px; font-size: 14px;">36 followers</span></li>
		<li><span style="padding: 0 8px; font-size: 14px;">24 following</span></li>
	</ul>
</div>
<div class="pane">
	<ul class="menu-index vertical">
		<li><a href="#tab-profile-newfeeds">Activity feed</a></li>
		<li><a href="#tab-profile-info">Info</a></li>
		<li><a href="#tab-profile-friends">Friends</a></li>
	</ul>
</div>
<div class="pane">
	<h3 style="padding: 0 8px;">Invite your friends</h3>
</div>
